<template>
    <div class="itemBox" >
        <p @click="showList = !showList" v-if="!showList">+ {{this.title}}</p>
        <p @click="showList = !showList" v-else>- {{this.title}}</p>
        <ul v-show="showList" >
            <li :class="{active:item == $store.state.currentTag}" v-for="(item,index) in itemClass" :key="item.id" v-text="item.tag" @click="choose(index,item)"></li>
        </ul>
    </div>
</template>
<script>
import {getSessionStore} from '../util/util.js';

export default {
    props:['title','type','obj','open'],
    data(){
        return {
            list:[],
            showList:this.open,
            current:'',
        }
    },
    computed:{
        itemClass(){
            // this.showList = true
            return this.obj
        }
    },
    watch:{
        open(){
            if(open){
                this.showList = this.open
            }
        }
    },
    methods:{
        choose(index,item){
            this.$store.state.currentTag = item.tag
            this.current = item.tag
            this.$http.get('http://'+this.IP+'/api/getMsg.php?tag='+item.tag+'&userType='+getSessionStore('type'))
                .then((res)=>{
                    // this.$emit('content',res.data);
                    this.$store.state.contentList = res.data;//vuex
                })
        }
    }
}
</script>

<style scoped>
    .itemBox{
        cursor: pointer;
        color:#8a8585;
    }
    p{
        margin: 0;
        font-size: 26px;
        font-weight: bold;
    }
    .itemBox li{
        padding-left: 20px;
        line-height: 30px;
        font-size: 22px;
    }
    .active{
        background-color: #aaa;
        color: #fff;
    }
</style>
